<template>
	<view class="content">
		
		<view class="rows ">
			<image :src="info.image" mode="widthFix" class="rows"></image>
		</view>

		
		<view class="goodsinfo bg38 bor_radius_20 ">
			<view class="iptBox  flexBox" v-if="info.creator">
				<view class="label">创作者</view>
				<view class="center">{{info.creator}}
				</view>
			</view>
			<view class="iptBox flexBox">
				<view class="label">收藏者</view>
				<view class="center">
					{{info.nick_name}}
					
				</view>
			</view>
			
			<view class="iptBox iptBox1 flexBox">
				<view class="label">生成时间</view>
				<view class="center">{{info.casting_time}}</view>
			</view>
		
			<view class="iptBox iptBox1 flexBox" v-if="info.number">
				<view class="label" >藏品编码</view>
				<view class="toKenNum d-flex a-center m-left50">
					 <view class="tokenOn flexac">
						 <image src="../../static/imgs/bg02.png" class="tokenIcon"></image>
					 </view>
					 <view class="tonum  ellipsis p-left50  white h7 ">
					
					 {{info.token_id}}#{{info.number}}/{{info.stock}}
					</view>
				</view>
				<!-- <view class="center">
				{{info.number}}
				</view> -->
			</view>
			<view class="iptBox iptBox1 flexBox">
				<view class="label">哈希值</view>
				<view class="center" v-if="info.tx_hash">
					{{info.tx_hash}}
					<image class="copy" @tap="copy(info.tx_hash)" src="../../static/img/my/copy.png" mode="">
					</image>
				</view>
				<view class="center" v-else>上链中</view>
			</view>
			
		</view>
		
		
		
		<view class="descBox bg38 bor_radius_20 " v-if="info.content">
			<view class="item">藏品描述</view>
			<view class="desinfo" v-html="util.checkImg(info.content)"></view>
		</view>
		<view class="footerBox flex_bt">
			<view class="subBtn subBtn1" @tap="openSalePopup()">敬请期待</view>
			<view class="subBtn" @tap="openTransferPopup()" v-if="info.is_trans == 1">转 赠</view>
			<view class="subBtn" @tap="botShow = true" v-else>转 赠</view>
			
		</view>

		<uni-popup ref="salePopup" type="center" :mask-click="false">
			<view class="specs_boxs">
				<view class="flex">
					<input type="digit" v-model="price" class="ipt" placeholder-class="iptP" placeholder="请输入出售价格" />
				</view>
				<view class="btnBox flex">
					<view class="btn" @tap="closeSalePopup()">取消</view>
					<view class="btn btn1" @tap="sale()">确定</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="TransferPopup" type="center" :mask-click="false">
			<view class="specs_boxs">
				<view class="flex">
					<input type="number" v-model="phone" class="ipt" placeholder-class="iptP"
						placeholder="请输入受赠人手机号码" />
				</view>
				<view class="flex" style="margin-top: 20rpx ;">
					<input type="number" v-model="pay_password" class="ipt" placeholder-class="iptP"
						placeholder="请输入交易密码" />
				</view>
				<view class="btnBox flex">
					<view class="btn" @tap="closeTransferPopup()">取消</view>
					<view class="btn btn1" @tap="Transfer()">确定</view>
				</view>
			</view>
		</uni-popup>
		
		<u-popup :show="botShow"  @close="botShow = false" bgColor="#2b2b2b" round="20" closeable>
		        <view class="row padding50-30">
					<view class="row a-center f-column white ">
						<text class="size36">温馨提示</text>
						<text class="size30 m-top10">本数字藏品尚未满足可以转增的条件</text>
					</view>
					<view class="row padding30-70 m-top20">
						<view class="row tiplist p-re p-left30 size26 m-bot30">你的数字藏品在购买满180天或受赠送2年后，可以转增给满十四周岁的实名用户</view>
						<view class="row tiplist p-re p-left30 size26 ">我们不支持任何形式的有偿转增，请警惕欺诈风险。一旦发现异常行为，我们会对相关账户采取限制措施。</view>
					</view>
					
					<view class="row j-centert m-top30">
						<view class="know  size30 flexac" @click="botShow = false">知道了</view>
					</view>
				</view>
		</u-popup>
	  
	</view>
</template>

<script>
	export default {
		data() {
			return {
				botShow:false,
				goodsId: '',
				banner: {},
				info: {},
				price: '',
				saleFlag: false,
				phone: '',
				TransferFlag: false,
				pay_password: ''
			}
		},
		onLoad(e) {
			this.goodsId = e.goodsId;
			this.getData();
		},
		methods: {
			openTransferPopup() {
				this.TransferFlag = true;
				if (this.saleFlag) {
					this.closeSalePopup();
				}
				this.$refs.TransferPopup.open()
			},
			closeTransferPopup() {
				this.phone = '';
				this.pay_password = '';
				this.TransferFlag = false;
				this.$refs.TransferPopup.close()
			},
			Transfer() { //转赠
				if (!this.phone) {
					this.toast('请输入受赠人手机号码');
					return;
				}
				if (!this.pay_password) {
					this.toast('请输入交易密码');
					return;
				}
				let data = {
					id: this.goodsId,
					target_phone: this.phone,
					pay_password: this.pay_password
				}
				this.$http.post('order/transfer', data).then(res => {
					if (res.code == 1) {
						this.toast(res.msg);
						this.closeTransferPopup();
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1200)
					} else {
						this.toast(res.msg)
					}
				})
			},
			openSalePopup() {
				// this.price = this.info.price;
				// this.saleFlag = true;
				// if (this.TransferFlag) {
				// 	this.closeTransferPopup();
				// }
				// this.$refs.salePopup.open()
			},
			closeSalePopup() {
				this.price = '';
				this.saleFlag = false;
				this.$refs.salePopup.close()
			},
			sale() { //出售
				if (!this.price) {
					this.toast('请输入出售价格');
					return;
				}
				let data = {
					id: this.goodsId,
					price: this.price
				}
				this.$http.post('order/sales', data).then(res => {
					if (res.code == 1) {
						this.toast(res.msg);
						this.closeSalePopup();
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1200)
					} else {
						this.toast(res.msg)
					}
				})
			},
			pay() {
				this.go('orderMakeSure?goodsId=' + this.goodsId);
			},
			getData() {
				this.$http.get('order/collectionDetail', {
					id: this.goodsId
				}).then(res => {
					if (res.code == 1) {
						this.banner = res.data.images;
						this.info = res.data;
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #23272C;
	}
</style>
<style lang="scss" scoped>
	.tiplist{
		color:#949494;
	}
	.tiplist::after{
		content: '';
		width:10rpx;
		height: 10rpx;
		background-color: #949494;
		border-radius: 50%;
		position: absolute;
		left:0;
		top:12rpx;
	}
	.know{
		width:240rpx;
		height: 80rpx;
		border-radius: 40rpx;
		border:1px solid #959595;
		color:#f6f6f6;
	}
	.toKenNum{
		height: 50rpx;
		position: relative;
	}
	.tokenOn{
		width:50rpx;
		height: 50rpx;
		background-image: url(@/static/imgs/bg01.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		z-index:10;
	}
	.tokenIcon{
		width:30rpx;
		height: 24rpx;
	}
	.tonum{
		padding:0 100rpx;
		height: 44rpx;
		line-height: 44rpx;
		background-color: #eab855;
		margin-left:-40rpx;
		border-radius: 22rpx;
	}
	@keyframes myfirst
	{
		0%   { transform: rotatey(0deg)}
		25%   { transform: rotatey(90deg)}
		50%   { transform: rotatey(180deg)}
		75%   { transform: rotatey(270deg)}
		100% { transform: rotatey(360deg)}
	}
	.content {
		padding-bottom: 200rpx;
		.Box{
			width: 100%;
			height: 680rpx;
			padding-bottom: 50rpx;
			background: url(../../static/img/index/bj1.png) no-repeat left top;
			background-size: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			.rotateBox{
				width: 540rpx;
				height: 540rpx;
				animation: myfirst 50s linear 150ms 100;
				.image{
					width: 540rpx;
					height: 540rpx;
				}
			}
		}
		.Box1{
			width: 100%;
			height: 360rpx;
			margin-top: -100rpx;
			padding-bottom: 30rpx;
			background: url(../../static/img/index/bj2.png) no-repeat top center;
			background-size: 620rpx;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			.img{
				width: 84rpx;
				height: 152rpx;
				margin: 0 15rpx;
			}
			.center{
				max-width: 500rpx;
				height: 152rpx;
				display: flex;
				flex-direction: column;
				justify-content:space-around;
				align-items: center;
				.goodsName{
					color: #FFFFFF;
					font-size: 30rpx;
					text-align: center;
					overflow: hidden;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.LimitBox {
					height: 40rpx;
					line-height: 40rpx;
					background: #4C464A;
					border-radius: 6rpx;
					font-size: 12px;
					text-align: center;
					.Limit {
						width: 60rpx;
						padding: 0 10rpx;
						border-radius: 6rpx;
						color: #010101;
						background-color: #F1E2BC;
					}
				
					.stock {
						padding: 0 10rpx;
						color: #F1E2BC;
					}
				}
			}
		}

		.specs_boxs {
			padding: 50rpx 0 10rpx;
			width: 600rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin: 0 auto;

			.ipt {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333;
				background-color: #F8F8F8;
				padding-left: 30rpx;
				margin: 0 30rpx;
			}

			.iptP {
				color: #777777;
				font-weight: 400;
			}

			.btnBox {
				margin-top: 20rpx;

				.btn {
					flex: 1;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 30rpx;
				}

				.btn1 {
					color: #AE3523;
				}
			}
		}

		.banner {
			width: 100%;
			height: 500rpx;
			background-color: #23272C;

			.uni-swiper-wrapper {
				z-index: 10;
			}

			image {
				width: 100%;
				height: 500rpx;
			}
		}

		.msgBox {
			background-color: #23272C;
			padding: 30rpx;

			.goodsName {
				color: #FFFFFF;
				font-size: 36rpx;
				font-weight: 500;
				margin-bottom: 20rpx;
			}

			.describe {
				color: #AAAAAA;
				font-size: 24rpx;
				line-height: 36rpx;
				font-weight: 500;
				margin-top: 20rpx;
			}

			.priceBox {
				color: #AE3523;
				font-size: 24rpx;
				font-weight: 500;

				text {
					font-weight: 500;
					font-size: 36rpx;
					margin-left: 10rpx;
				}
			}
		}

		.descBox {
			width:690rpx;
			padding: 20rpx;
			margin: 20rpx auto;
			// background-color: #23272C;
			color: #AAAAAA;

			.item {
				font-size: 26rpx;
				font-weight: 500;
				color: #FFFFFF;
				margin-bottom: 10rpx;
			}
		}

		.goodsinfo {
			width:690rpx;
			padding: 20rpx;
			margin: 20rpx auto;

			.iptBox {
				padding: 20rpx 0;

				.label {
					width: 20%;
					font-size: 24rpx;
					color: #AAAAAA;
				}

				.center {
					width:75%;
					color: #FFFFFF;
					font-size: 24rpx;
					word-break: break-word;
					line-height: 44rpx;
					position: relative;
					padding-right: 54rpx;
				}

				.copy {
					width: 44rpx;
					height: 44rpx;
					position: absolute;
					right: 0;
				}
			}

			.iptBox1 {
				.center {
					color: #AAAAAA;
					font-weight: 500;
				}
			}
		}

		.footerBox {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 10;
			width: 100%;
			height: 120rpx;
			background-color: #23272C;
			box-shadow: 0rpx -4rpx 32rpx 0rpx rgba(180, 180, 180, 0.5);

			.subBtn {
				width: 320rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: #FFDD9D;
				font-size: 32rpx;
				font-weight: 500;
				background: #AE3523;
				border-radius: 44rpx;
				border: 2rpx solid #AE3523;
				margin: 0 30rpx;
			}

			.subBtn1 {
				background: #383B3F;
				color: #FFFFFF;
				border: 2rpx solid #333333;
			}
		}


	}
</style>
